import { useState } from 'react'
import ColorPicker from './components/colorPicker'
import ColorBrowser from './components/colorBrowser'
import MemberTableComonent from './components/memberTable'
import SidebarComponent from './components/sidebarComponent'
import { getMembersCollection } from "./api/memberApi";
import { Color } from './model/color'

function App() {
  // 类型参数 约束color类型
  const [color, setColor] = useState<Color>({
    red: 20,
    green: 40,
    blue: 180
  })
  const [IsVisible, setVisible] = useState(false)
  return (
    <div>
      <div className="App">
        <ColorBrowser color={color} />
        <ColorPicker color={color} onColorUpdated={setColor} />
      </div>
      <div style={{ float: "left" }}>
        <button onClick={() => setVisible(!IsVisible)}>Toggle Sidebar</button>
      </div>
      <SidebarComponent isVisible={IsVisible}> 
        <h1>Cool Scfi movies</h1>
        <ul>
          <li><a href="#">Interstellar</a></li>
          <li><a href="#">Blade Runner</a></li>
          <li><a href="#">a space odyssey</a></li>
        </ul>
      </SidebarComponent>
      <MemberTableComonent />
    </div>

  )
}

export default App
